<!-- 营收结算月 生成报表 -->
<template>
    <div class="createReport">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/revenueSettlementMonth' }">营收结算-月</el-breadcrumb-item>
            <el-breadcrumb-item>生成报表</el-breadcrumb-item>
        </el-breadcrumb>

        <div>
            <p>选择报表月份</p>
            <el-date-picker
                    v-model="month"
                    type="month"
                    placeholder="选择月">
            </el-date-picker>
        </div>

        <el-table
                :data="typeList"
                border
                style="width: 350px; margin-top: 20px;">
            <el-table-column
                    prop="name"
                    align="center"
                    label="报表类型">
            </el-table-column>
            <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <span v-if="scope.row.version"></span>
                    <a v-else href="javascript:;;" @click="bindStandard">绑定标准</a>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin: 40px 0 0 180px">
            <el-button type="primary" @click="generateReport()">生成报表</el-button>
            <el-button type="primary" @click="cancel()">取消</el-button>
        </div>

        <el-dialog
                title="选择区间标准"
                :visible.sync="selectDialogVisible"
                width="40%"
                class="dialog"
                center>
            <div>
                <el-row :span="24" :gutter="20">
                    <el-col :span="18">
                        <el-input
                                placeholder="请输入内容"
                                prefix-icon="el-icon-search"
                                size="normal"
                                v-model="version">
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button size="normal" type="primary" @click="getStandard">查询</el-button>
                    </el-col>
                </el-row>

                <div class="mt20" style="margin-left: 60px;height: 400px;overflow-y: auto;">
                    <div v-for="item in standardList" class="selectedInterval-item">
                        <el-radio class="mt20" v-model="selectedIntervalValue" :label="item.id">
                            <div class="selectedInterval-item-row">标准名称：{{item.name}}</div>
                            <div class="selectedInterval-item-row">版本： {{item.version}}</div>
                            <div class="selectedInterval-item-row">创建时间：{{item.createTime}}</div>
                        </el-radio>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" style="text-align: center !important;">
                <el-button type="primary" @click="ensure">选 择</el-button>
                <el-button @click="selectDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath'

    export default {
        name: "createReport",
        data() {
            return {
                typeList: [],
                typeMapList: {
                    TC: {
                        name: "交易佣金",
                        version: "",
                        api: api.getDealAllotList
                    }

                },
                requestUrl: "",
                month: "",
                standardList: [],
                selectDialogVisible: false,
                version: "",
                selectedIntervalValue: "",


                selectDialogInputValue: "",
                selectedInterval: "",
                standardlist: undefined,
            }
        },
        created() {
            let type = this.$route.query.type;
            this.typeList = [this.typeMapList[type]];
            this.requestUrl = this.typeMapList[type].api;
        },
        mounted() {

        },
        filters: {
            filterstand(val) {
                if (val == 1) {
                    return '成交标准'
                } else if (val == 2) {
                    return '营收结算标准-月'
                } else if (val == 3) {
                    return '营收结算标准-年 '
                } else if (val == 4) {
                    return '利润结算标准'
                }
            },
            filterSource(val) {
                if (val == 1) {
                    return '开发商类型'
                } else if (val == 2) {
                    return '项目类型'
                }
            },
            filterExtractionRule(val) {
                if (val == 1) {
                    return '套*金额'
                }
            },
        },
        methods: {
            bindStandard() {
                if (this.month) {
                    this.selectDialogVisible = true;
                } else {
                    this.$message({
                        message: '请选择日期',
                        type: 'warning'
                    });
                }
            },
            getStandard() {


                this.axios.post(this.requestUrl, {
                    version: this.version
                }).then((res) => {
                    this.standardList = res.data.data.list
                })
            },


            selectradio(val) {
                this.selectedInterval = +val
            },
            getTimeString(timestamp) {
                if (!timestamp) {
                    return ''
                }
                const time = new Date(timestamp)
                let dateStr = ''
                const year = time.getFullYear() //当前完整年数 （4位 1970-？？？）
                const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                dateStr = year + '-' + month
                return dateStr
            },
            generateReport() {
                let month = this.getTimeString(this.cmonth)
                if (month == '') {
                    this.$message({
                        message: '请选择日期',
                        type: 'warning'
                    });
                    return
                }
                this.axios.post(api.MONTHGENERATEREPORT, {month: month}).then((res) => {
                    if (res && res.data.code == 200) {
                        this.$message({
                            message: '生成报表成功',
                            type: 'success'
                        });
                        this.$router.push({path: '/revenueSettlementMonth'})
                    }
                })
            },
            cancel() {
                this.$router.push({path: '/revenueSettlementMonth'})
            },
            ensure() {
                let month = this.getTimeString(this.cmonth)
                if (this.selectedInterval == '') {
                    this.$message({
                        message: '请绑定标准',
                        type: 'warning'
                    });
                    return
                }
                if (month == '') {
                    this.$message({
                        message: '请选择日期',
                        type: 'warning'
                    });
                    return
                }

                this.axios.post(api.REVENUEBINDSTANDARD, {
                    month: month,
                    standardId: this.selectedInterval
                }).then((res) => {
                    if (res && res.data.code == 200) {
                        this.$message({
                            message: '绑定成功！',
                            type: 'success'
                        });
                        this.selectDialogVisible = false
                    }
                })
            },

            openbindstrandard() {
                this.selectDialogVisible = true
            }
        },
    }
</script>

<style scoped lang="stylus">

    table
        border-collapse: collapse
        margin-top: 50px

    table, td, th
        border: 1px solid #ccc

    td, th
        width: 300px
        height: 40px
        text-align: center

    th
        background-color: rgb(239, 239, 239)

    .selectedInterval-item {
        padding: 0 20px;
        label {
            display: flex;
            align-items: center;
            > span {
                display: inline-block;
                margin-top: 20px;
            }
        }
        .selectedInterval-item-row {
            line-height: 25px;
        }
    }
</style>
